<template>
<div id="login">
    <div class="top"></div>
    <el-form :label-position="labelPosition" :rules="rules" ref="loginForm" label-width="80px" :model="user">
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="user.username" class="me_el_input"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input type="password" v-model="user.password" class="me_el_input"></el-input>
                </el-form-item>

                <el-form-item label="验证码" prop="vcode">
                    <el-input v-model="user.vcode" class="vcode"></el-input>
                    <el-button class="me_vcode_left" @click="getVcode"  v-if="showVcode">点击获取验证码</el-button>
                    <el-button class="me_vcode_left" v-else ref="me_vcode" disabled>请在{{vcode_time}}S后重试</el-button>
                </el-form-item>

     </el-form>
     <el-row class="me_el_row">
         <el-button type="primary" @click="login('loginForm')">欢迎登陆</el-button>
         <el-button type="success">注册</el-button>
    </el-row>
</div>
</template>
<script>
export default{
  name: 'Login',
  data () {
    var checkVcode = (rule, value, callback) => {
      const SVcode = this.handleCode()
      if (!value) {
        return callback(new Error('请输入验证码!'))
      }
      setTimeout(() => {
        if (value !== SVcode) {
          return callback(new Error('验证码输入不正确!'))
        } else {
          callback()
        }
      }, 500)
    }
    return {
      showVcode: true,
      vcode_time: 60,
      labelPosition: 'right',
      msg: 'login',
      user: {
        username: '',
        password: '',
        vcode: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名！', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码！', trigger: 'blur' }
        ],
        vcode: [
          {validator: checkVcode, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    getVcode () {
      this.showVcode = false
      let count = this.vcode_time ? this.vcode_time : 60
      let t = setInterval(() => {
        count--
        if (count === 0) {
          this.showVcode = true
          clearInterval(t)
        }
        this.vcode_time = count
      }, 1000)
    },
    handleCode () {
      return '123'
    },
    login (formName) {
      let self = this
      self.$refs[formName].validate((valid) => {
        if (valid) {
          self.$store.dispatch('login', {username: self.user.username, password: self.user.password}).then(res => {
            self.$message({
              message: '恭喜你，登陆成功！',
              type: 'success'
            })
          }).catch(res => {
            self.$message.error('账号或密码错误！')
          })
        } else {
          console.log('false')
          return false
        }
      }
      )
    }
  }
}
</script>
<style >
.top{
    margin-top: 40%;
}
.me_el_input{
    width: 94%;
}
.me_el_row{
    text-align: center;
}
.me_vcode_left{
    margin-left: 20px;
}
#login{
    overflow: hidden;
    width:100%;
    height:100%;
    background-color: #18A;
    background-image: url("../assets/images/course/bg.png");
    background-attachment: fixed;
    background-repeat: no-repead;
    background-size: 100% 100%;
}
.el-form-item__label{
    font-weight: bold;
    font-size: 16px;
}
.vcode {
    width: 36%;
}
</style>
